<template>
	<view :style="{'fontFamily':themeColor.typeface,'color':themeColor.main_font_color}">
		<view class="sign_body" :style="{'background':`linear-gradient(to bottom,${themeColor.main_color},white)`}">
			<view class="sign_show">
				<view class="show_top">
					<view class="top_box">
						<view class="box_text">
							<view>已连续签到</view>
							<view>
								<span style="font-size: 100rpx;" :style="{'color':themeColor.main_color}">20</span>
								<span>天</span>
							</view>
						</view>
					</view>
					<view class="top_botton">
						<u-button type="error" shape="circle" text="签到" @click="getSignIn"></u-button>
					</view>
				</view>
			</view>
			<view class="sign_calendar">
				<view>签到任务</view>
				<view>
					<u-grid :border="false" col="5">
					    <u-grid-item v-for="item in signData" :key="item.id" style="border: 1px dashed #fff;">
					        <text class="grid-text">第{{item.number_day}}天</text>
							<u--image
								:src="wechatConfig.tencent‌Domain + item.image"
								width="40"
								height="40"
							></u--image>
							<text class="grid-text">{{item.reward_type}}</text>
					    </u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			themeColor:'',
			wechatConfig:'',
			signData:[],
		}
	},
	onLoad(){
		this.themeColor = this.$store.state.themeConfig || uni.getStorageSync('themeConfig')
		this.wechatConfig = this.$store.state.wechatConfig ||  uni.getStorageSync('wechatConfig')
		this.signList()
	},
	methods:{
		signList(){
			 this.tui.request("/basic-capi/sign_in/signInList", "get").then((res)=>{
				if(res.code == 200){
					this.signData = res.data.list
				}
				console.log("resk",res)
				console.log("this.signData",this.signData)
			 })
		},
		getSignIn(){
			
		},
	}
}
</script>

<style>
.sign_body{
	height: 1600rpx;
	padding: 15rpx;
}
.sign_body .sign_show{
	height: 25%;
}
	
.sign_body .sign_task{
	height: 65%;
}

.sign_show .show_top .top_box {
    position: relative;
    width: 350rpx; 
    height: 350rpx;
    margin: 80rpx auto 10rpx auto;
    border-radius: 50%;
    background: linear-gradient(to bottom, #fff, transparent);
}
.sign_show .show_top .top_box .box_text{
	height: 100%;
	padding: 66rpx 0;
	text-align: center;
}
.sign_show .show_top .top_botton{
	width: 240rpx;
	margin: 5rpx auto;
	position: relative;
	top: -95rpx;
}
.sign_calendar{
	
}
</style>